<template>
  <list-page>
    <pub-search v-model:searchColumns="searchColumns" v-model:search-form="searchForm" mask-append-to="table-content"
      @search="search">
      <template #leftBtn>
        <el-button type="primary" @click="edit('')" :icon="Plus">
          新增
        </el-button>
        <pub-import v-hasPermissions="['ZZDA-import']" @uploadSuccess="getList" importUrl="/seniorElder/import"
          templateDownloadUrl="zzdaTemplate" templateName="长者档案导入模板" importErrorDownloadUrl="zzdaErrorTemplate"
          btn-name="导入" dialogTitle="导入长者档案" accept=".xlsx,.xls" :can-repeat="true"
          style="margin-left: 10px"></pub-import>
        <pub-download style="margin-left: 10px" url="zzdaExport" fileType="excel" :params="searchForm"
          file-name="设施信息填报情况统计">
          <template v-slot:default="slotProps">
            <el-button :loading="slotProps.loading" type="primary" :icon="Files" class="btn-text-export">
              导出
            </el-button>
          </template>
        </pub-download>
      </template>
    </pub-search>
    <pub-table ref="pubTable" :column="columns" :data="tableData" :loading="tableLoading">
      <template v-slot:area="scope">
        {{
          scope.row.provinceName +
          scope.row.cityName +
          scope.row.countyName +
          scope.row.streetName +
          scope.row.communityName
        }}
      </template>
      <template v-slot:option="scope">
        <pub-table-buttons :buttons="renderTableButtons(scope.row)" />
      </template>
    </pub-table>
    <pub-pagination :total="pagination.total" v-model:page="pagination.page" v-model:limit="pagination.pageSize"
      @pagination="pagination.change"></pub-pagination>
    <!-- 详情页-自带关闭按钮 -->
    <pub-page-dialog-close v-model:show="isShow.detailShow">
      <detail-com :id="currentId"></detail-com>
    </pub-page-dialog-close>
    <!-- 详情弹窗 -->
    <pub-dialog v-if="isShow.detailDialogShow" title="编辑" :hasExtraBtn="true" v-model:visible="isShow.detailDialogShow"
      width="800">
      <detail-dialog :id="currentId" @close="isShow.detailDialogShow = false"></detail-dialog>
    </pub-dialog>
    <!-- 表单页 -->
    <pub-page-dialog v-model:show="isShow.editShow">
      <edit-com @success="submitSuccess" @close="isShow.editShow = false" :id="currentId">
      </edit-com>
    </pub-page-dialog>
    <!-- 表单弹窗 -->
    <pub-dialog v-if="isShow.editDialogShow" title="编辑" :hasExtraBtn="true" v-model:visible="isShow.editDialogShow"
      width="800">
      <edit-dialog :id="currentId" @success="submitSuccess" @cancel="isShow.editDialogShow = false"></edit-dialog>
    </pub-dialog>
  </list-page>
</template>

<script setup>
import { Plus, Files } from '@element-plus/icons-vue'
import { useTable } from '@/hooks/UseTable'
import {
  get_zzda_list,
  del_zzda_list,
  get_current_zly
} from '@/api/basicSetting.js'
import { reset_password } from '@/api/system'
import { ElMessage, ElMessageBox } from 'element-plus'
import detailCom from './components/detail.vue'
import detailDialog from './components/detailDialog.vue'
import editCom from './components/edit.vue'
import { appCurrentState } from '@/pinia/modules/app'
import { Sm4Dncrypt } from '@/utils/encryption.js'
import editDialog from './components/editDialog.vue'
import { useUserStore } from '@/pinia/modules/user'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { intersection } from 'lodash-es'
const router = useRouter()
const currentId = ref('')
const currentStatus = ref(1)
const renderTableButtons = (row) => {
  return [
    { label: '详情', event: detail, data: row },
    { label: '编辑', event: edit, data: row },
    { label: '删除', event: del, data: row, disabled: true },
    { label: '表单弹窗', event: openEditDialog, data: row },
    { label: '详情弹窗', event: openDetailDialog, data: row },
  ]
}
const searchColumns = ref([
  {
    label: '居住区划',
    el: 'AreaSelect',
    bind: 'areaCode',
    defaultValue:
      useUserStore().orgInfo.level == 5
        ? useUserStore().userParentArea
        : useUserStore().userLastArea,
    disabledLevel: -1,
    startFrom: `${(useUserStore().orgInfo.level == 5
      ? useUserStore().userAreaArr[2]
      : useUserStore().userParentArea) || '000000'
      }`,
    maxLevel: 4,
    labelWidth: 140
  },
  {
    label: '姓名',
    el: 'Input',
    bind: 'name',
    defaultValue: '',
    labelWidth: 50
  },
  {
    label: '证件号码',
    el: 'IdCardInput',
    bind: 'idCard',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '联系方式',
    el: 'Input',
    bind: 'contactNumber',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '年龄',
    el: 'AgeRange',
    bindBegin: 'minAge',
    bindEnd: 'maxAge',
    defaultValue: '',
    labelWidth: 50
  },
  {
    label: '数据状态',
    el: 'DictSelect',
    code: 'ZZDA-SJZT',
    bind: 'saveType',
    labelWidth: 80
  }
])
const isShow = reactive({
  detailDialogShow: false,
  detailShow: false,
  editShow: false,
  editDialogShow: false
})
const currentElderId = ref('')

const columns = ref([
  { label: '姓名', prop: 'name' },
  { label: '证件号码', prop: 'idCard' },
  {
    label: '性别',
    prop: 'sexCode',
    type: 'formatDict',
    formatCode: 'XB'
  },
  { label: '出生日期', prop: 'birthDate' },
  { label: '年龄', prop: 'age' },
  { label: '联系方式', prop: 'contactNumber' },
  { label: '居住区划', prop: 'provinceName', type: 'slot', slot: 'area' },
  {
    label: '数据状态',
    prop: 'saveType',
    type: 'formatDict',
    formatCode: 'ZZDA-SJZT'
  },
  { label: '更新日期', prop: 'renewDate' },
  { label: '社区养老服务站', prop: 'orgName' },
  { label: '操作', type: 'option', width: '180', fixed: 'right' }
])
const state = reactive({
  code: 1
})
const code = ref(1)
let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(get_zzda_list)

const detail = row => {
  currentId.value = row.id
  isShow.detailShow = true
}

const submitSuccess = val => {
  isShow[val] = false
  search()
}

const edit = row => {
  currentId.value = row.id
  isShow.editShow = true
}

const openDetailDialog = row => {
  currentId.value = row.id
  isShow.detailDialogShow = true
}

const openEditDialog = row => {
  search()
  currentId.value = row.id
  isShow.editDialogShow = true
}

const del = row => {
  ElMessageBox.confirm('是否确认删除所选择数据?')
    .then(() => {
      del_zzda_list(row.id).then(res => {
        if (res.succeed) {
          ElMessage({
            type: 'success',
            message: res.msg
          })
          search()
        }
      })
    })
    .catch(() => { })
}

onMounted(() => {
  // getCurrentZLY()
  if (router.currentRoute.value.query.saveType) {
    searchForm.value.saveType = router.currentRoute.value.query.saveType
  }
  getList()
})

onBeforeMount(() => {
  searchForm.value.level = 5
})
</script>
<style lang="scss" scoped></style>
